	<script type="text/javascript">
  		function volver(button) {
			button.form.method = 'get'
			button.form.action = '/listaConferencia'
			return true
		}
		
		function selectAll(select) {
			var selLength = select.length;
			for(i=selLength-1; i>=0; i--) {
		    	select.options[i].selected = true
	    	}
	    
	    	select.name = select.name + "[]"
	    	return true;
		}
		
		function addOption(theSel, theText, theValue)
		{
		  var newOpt = new Option(theText, theValue);
		  var selLength = theSel.length;
		  theSel.options[selLength] = newOpt;
		}
	
		function deleteOption(theSel, theIndex)
		{ 
		  var selLength = theSel.length;
		  if(selLength>0)
		  {
		    theSel.options[theIndex] = null;
		  }
		}
		
		function moveOptions(theSelFrom, theSelTo)
		{
		  var selLength = theSelFrom.length;
		  var selectedText = new Array();
		  var selectedValues = new Array();
		  var selectedCount = 0;
		  
		  var i;
		  
		  for(i=selLength-1; i>=0; i--)
		  {
		    if(theSelFrom.options[i].selected)
		    {
		      selectedText[selectedCount] = theSelFrom.options[i].text;
		      selectedValues[selectedCount] = theSelFrom.options[i].value;
		      deleteOption(theSelFrom, i);
		      selectedCount++;
		    }
		  }
		
		  for(i=selectedCount-1; i>=0; i--)
		  {
		    addOption(theSelTo, selectedText[i], selectedValues[i]);
		  }
		}
	</script>
	<script>
		jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
	        return this.each(function() {
	            var select = this;
	            var options = [];
	            $(select).find('option').each(function() {
	                options.push({value: $(this).val(), text: $(this).text()});
	            });
	            $(select).data('options', options);
	            $(textbox).bind('change keyup', function() {
	                var options = $(select).empty().data('options');
	                var search = $.trim($(this).val());
	                var regex = new RegExp(search,"gi");
	              
	                $.each(options, function(i) {
	                    var option = options[i];
	                    if((textbox.val().length > 2) && (option.text.match(regex) !== null)) {
	                        $(select).append(
	                           $('<option>').text(option.text).val(option.value)
	                        );
	                    }
	                });
	                if (selectSingleMatch === true && $(select).children().length === 1) {
	                    $(select).children().get(0).selected = true;
	                }
	            });            
	        });
	    };
	
	    $(function filtrar() {
	        $('#select').filterByText($('#textbox'), true);
	    });
	</script>
	<h1> Crear Conferencia </h1> 

	<br>
		<% if @message != nil %>
			<p class="alert alert-danger text-danger"><%= @message %></p>
		<% end %>
	<br>
    <form method="post" action="/crearConferencia">
		<label>Nombre </label> <br>
		<input type="text" name="nombre" value="<%= params[:nombre] %>" style="width:250px">
	  
		<br><br>
	  	
	  	<label>Administradores </label> <br><br>
	  	<input id="textbox" placeholder="Buscar Usuario..." class="filter form-control" type="text" name="userNotSelected" style="width:50%"> 
		<br/>
	  	<div class="col-md-3 box1" >
			<label for="bootstrap-duallistbox-nonselected-list_duallistbox_demo2">Usuarios No seleccionados</label>
			<br/>
			<div class="btn-group buttons">
				<button type="button" class="btn btn-default move" title="Move selected" onclick="moveOptions(this.form.SelectLeft, this.form.SelectRight);">
				<i class="glyphicon glyphicon-arrow-right"></i></button>
			</div> 
			<select id="select" name="SelectLeft" data-duallistbox_generated="true" class="form-control" size="10" multiple="multiple">
		    	<% @usuariosDisponibles.each do |usuario| %>
		        	<option value="<%= usuario.id %>" style="display:none;"><%= usuario.nombre%> <%= usuario.apellido%></option>
		        <% end %>
			</select>
	    </div>       
		
		<div class="col-md-3 box1">
			<label for="bootstrap-duallistbox-nonselected-list_duallistbox_demo2">Usuarios Seleccionados</label>
			<br/>
			<div class="btn-group buttons">
				<button type="button" class="btn btn-default remove" title="Move selected" onclick="moveOptions(this.form.SelectRight, this.form.SelectLeft);">
				<i class="glyphicon glyphicon-arrow-left"></i></button>
			</div>
			<select name="SelectRight" data-duallistbox_generated="true" class="form-control" multiple="multiple" size="10"  >
				<% @usuariosGuardados.each do |usuario| %>
		        	<option value="<%= usuario.id %>"><%= usuario.nombre%> <%= usuario.apellido%></option>
		        <% end %>
		    </select>
	    </div>  
    
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<input type="submit" value="Crear" class="btn btn-primary" onClick="selectAll(this.form.SelectRight)"/>
		<input type="submit" value="Volver" onClick="volver(this)" class="btn btn-default"/>
    </form>
